<script type="text/ng-template" id="visualizations/stateGraphViz">
  <!-- NOTE TO DEVELOPERS: The svg defs needed for this directive are
  included at the bottom of exploration_editor.html. In order for the
  elements to render properly in Firefox, there cannot be multiple defs
  with the same id on the page. -->

  <style>
    .oppia-graph-viz .pannable-rect {
      cursor: move;
      fill: none;
      fill-opacity: 0;
      pointer-events: all;
    }

    .oppia-graph-viz path.link {
      fill: none;
      stroke: rgb(179, 179, 179);
      stroke-width: 3px;
    }

    .oppia-graph-viz text {
      font: 12px sans-serif;
      pointer-events: none;
    }

    .oppia-graph-viz text.shadow {
      stroke: #fff;
      stroke-width: 3px;
      stroke-opacity: .8;
    }

    .oppia-graph-viz .node rect {
      fill: beige;
      pointer-events: all;
      stroke: rgb(0, 0, 0);
      -moz-transition: all 0.15s;
      -webkit-transition: all 0.15s;
      -o-transition: all 0.15s;
      transition: all 0.15s;
    }
    .oppia-graph-viz .node rect.init-node {
      fill: #bbedb1;
    }
    .oppia-graph-viz .node rect.end-node {
      fill: green;
    }
    .oppia-graph-viz .node rect.bad-node {
      fill: pink;
    }
    .oppia-graph-viz .node rect.normal-node:hover,
    .oppia-graph-viz .node rect.init-node:hover,
    .oppia-graph-viz .node rect.bad-node:hover {
      fill: blue;
    }

    .oppia-graph-viz .highlight {
      fill: #FFFFC2;
      fill-opacity: 1;
      stroke: #DDD;
      stroke-width: 1;
      stroke-opacity: 1;
    }

    .oppia-graph-viz .clickable {
      cursor: pointer;
    }

    .oppia-graph-viz .legend-bar {
      fill: url('#nodegradient');
      stroke: black;
      stroke-width: 0.5;
    }
  </style>

  <div style="height: <[getGraphHeightInPixels()]>px;" ng-show="graphLoaded">
    <button ng-if="!!onMaximizeFunction" ng-click="onMaximizeFunction()"
            class="btn btn-default btn-sm oppia-graph-resize-button">
      <span title="Expand Map" class="glyphicon glyphicon-fullscreen" style="font-size: larger;">
      </span>
    </button>

    <svg class="oppia-graph-viz" width="100%" height="100%">
      <g>
        <g ng-attr-transform="<[overallTransformStr]>">
          <rect class="pannable-rect" ng-if="allowPanning"
                ng-attr-width="<[VIEWPORT_WIDTH]>" ng-attr-height="<[VIEWPORT_HEIGHT]>"
                ng-attr-x="<[VIEWPORT_X]>" ng-attr-y="<[VIEWPORT_Y]>">
          </rect>

          <g>
            <g class="pannable-child" ng-attr-transform="<[innerTransformStr]>">
              <g ng-repeat="link in augmentedLinks">
                <path class="link" ng-if="link.d" ng-attr-d="<[link.d]>" marker-end="url(#arrowhead)" ng-attr-style="<[link.style]>">
                </path>
              </g>

              <g class="node" ng-repeat="node in nodeList">
                <rect rx="4" ry="4" ng-attr-height="<[node.height]>" ng-attr-width="<[node.width]>"
                      ng-attr-x="<[node.x0]>" ng-attr-y="<[node.y0]>"
                      ng-class="{clickable: canNavigateToNode(node.id), 'init-node': node.isInitNode, 'end-node': node.isEndNode, 'bad-node': node.isBadNode, 'normal-node': node.isNormalNode}"
                      ng-attr-style="<[node.style]>"
                      ng-click="onClickFunction(node.id)">
                </rect>
                <title><[getNodeTitle(node)]></title>
                <text text-anchor="middle" ng-attr-x="<[node.xLabel]>" ng-attr-y="<[node.yLabel]>">
                  <tspan><[getTruncatedLabel(node.label)]></tspan>
                  <tspan ng-attr-x="<[node.xLabel]>" dy="1em" style="fill:gray"><[getTruncatedLabel(node.secondaryLabel)]></tspan>
                </text>
                <g ng-if="isEditable && onDeleteFunction && node.canDelete">
                  <rect height="15" width="15" opacity="0" stroke-width="0"
                        ng-attr-x="<[node.x0 + node.width]>" ng-attr-y="<[node.y0]>"
                        transform="translate(0, -15)"
                        class="clickable"
                        style="fill: pink; cursor: pointer;"
                        ng-click="onNodeDeletionClick(node.id)"></rect>
                  <text ng-attr-dx="<[node.x0 + node.width]>" ng-attr-dy="<[node.y0]>" text-anchor="right">
                    x
                  </text>
                </g>
                <g ng-if="highlightStates && isStateFlagged(node.id)">
                  <rect ng-click="onClickFunction(node.id)" class="highlight"
                        width="22" height="22" ng-attr-x="<[node.x0]>" ng-attr-y="<[node.y0]>"
                        ng-class="{clickable: node.id != finalStateId}"
                        ng-attr-transform="<[getHighlightTransform(node.x0, node.y0)]>">
                  </rect>
                  <text fill="firebrick" text-anchor="middle" ng-attr-x="<[node.x0 + 11]>"
                        ng-attr-y="<[node.y0 + 17]>" style="font-size: 22px;"
                        ng-attr-transform="<[getHighlightTextTransform(node.x0, node.y0)]>">
                    ⚠
                  </text>
                </g>
              </g>
            </g>

            <g ng-if="opacityMap">
              <rect width="210" height="70" ng-attr-x="<[GRAPH_WIDTH - 210]>" y="10" style="fill: transparent; stroke: black;">
              </rect>

              <rect width="190" height="20" ng-attr-x="<[GRAPH_WIDTH - 200]>" y="20"
                    class="legend-bar">
              </rect>

              <text ng-attr-x="<[GRAPH_WIDTH - 200]>" y="60">
                <[opacityMap.legend]>
              </text>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </div>
</script>
